<template>
  <div style="font-size: 15px">
    <pre
      class="github-light pre-code"
      tabindex="0"
    ><code><div class="line"><span style="color:#D73A49">function</span><span style="color:#6F42C1"> jsScript</span><span style="color:#24292E">(</span><span style="color:#E36209">data</span><span style="color:#24292E">) {</span></div><div class="line"></div></code></pre>

    <CodeEditor v-model="code" :language="language" />

    <pre
      class="github-light pre-code"
      tabindex="0"
    ><code><div class="line"><span style="color:#24292E">}</span></div></code></pre>
  </div>

  {{
    dynamicFun(
      code,
      [
        { name: '张三', time: new Date().toISOString() },
        { name: '李四', time: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString() }, // 2小时前
        { name: '王五', time: new Date(Date.now() - 1000 * 60 * 60 * 26).toISOString() }, // 26小时前
      ],
      'data',
    )
  }}
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import CodeEditor from './Editor/CodeEditor.vue'
import { dynamicFun } from '@/utils'

const code = ref(`// 只返回当天的数据
const today = new Date();
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
const end = new Date(start);
end.setDate(start.getDate() + 1);

// 将数据进行 map, 并进行返回
return data.filter(item => {
  const t = new Date(item.time);
  return t >= start && t < end;
}).map(m => ({ ...m, time: new Date(m.time).toLocaleString() }));`)
const language = ref('javascript')
</script>

<style scoped>
.pre-code {
  background-color: #fff;
  color: #24292e;
  display: inline-block;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 4px;
  font-weight: 900;
}
</style>
